<template>
  <div>
    <span v-if="readonly">{{ value }}</span>
    <el-input
      v-else
      :value="value"
      :disabled="disabled"
      :readonly="readonly"
      :placeholder="placeholder"
      :maxlength="maxlength"
      :type="type"
      :autosize="autosize"
      :size="size"
      :clearable="clearable"
      @input="handleChange"
    ></el-input>
  </div>
</template>

<script>
export default {
  name: 'MInput',
  props: {
    value: {
      type: String,
    },
    placeholder: {
      type: String,
      default: 'Por favor escribe',
    },
    maxlength: {
      type: String,
      default: '50',
    },
    type: {
      type: String,
      default: 'text',
    },
    autosize: {
      type: Object,
      default: () => {
        return { minRows: 6 }
      },
    },
    size: {
      type: String,
      default: 'small',
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleChange(val) {
      this.$emit('input', val)
    },
  },
}
</script>
